import styled from 'styled-components';
import logoPic from './img/logo.png'
import { ThemeColor } from '../../common/globalStyle'

export const HeaderWrapper = styled.div`
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  height: 70px;
  line-height: 70px;
  box-sizing: border-box;
`

export const Logo = styled.div`
  float: left;
  width: 336px; 
  height: 70px;
	background: url(${logoPic});
	background-size: contain;
`;

export const Menu = styled.ul`
  float: left;
  width: 240px;
  li {
    float:left;
    margin: 0 16px;
    a {
      font-size: 14px;
      font-family: 微软雅黑;
      color: rgb(51, 51, 51);
      &.active {
        color: ${ThemeColor};
      }
    }
  }
`;

export const SearchWrapper = styled.div`
  width:264px;
  float:left;
`;

export const InfoWrapper = styled.ul`
  float: left;
  line-height: 70px;
  li {
    float: left;
    padding: 0px 6px;
    font-size: 14px;
    color: #333;
    line-height: 70px;
    box-sizing: border-box;
    i {
      vertical-align: -5px;
    }
    a {
      color: #333;
      cursor: pointer;
      padding-left: 4px;
      .cart-num {
        height: 18px;
        line-height: 18px;
        width: 18px;
        display: inline-block;
        background: #f01414;
        border-radius: 50%;
        color: #fff;
        font-style: normal;
        font-size: 12px;
        margin-left: 8px;
        text-align: center;
      }
    }
  }
`
